
const path = require("path")
const resolve = dir => path.resolve(__dirname, dir)

const CompressionPlugin = require("compression-webpack-plugin")

module.exports = {
  publicPath: "./", //配置根路径
  assetsDir: "assets", //静态资源目录(js\css\img)
  outputDir: "vue2-element-admin",
  transpileDependencies: [
    "vue-axios-optimize"
  ],
  devServer: {
    hot: true,
    open: true,
    port: 1314, // https://www.xiaobu.host 静态资源仅允许  http://localhost:1314 访问
    proxy: {
      "/proxy": {
        target: "https://www.xiaobu.host/api",
        ws: true,
        changOrigin: true,
        pathRewrite: {
          "^/proxy": ""
        }
      }
    }
  },
  css: {
    // 是否使用css分离插件 ExtractTextPlugin
    //如果需要css热更新就设置为false,打包时候要改为true
    extract: false,
    // 开启 CSS source maps?
    sourceMap: true,
    // css预设器配置项
    loaderOptions: {
      sass: {
        // @/ is an alias to src/
        // so this assumes you have a file named `src/variables.scss`
        prependData: `@import "@/styles/app-variables.scss";`
      }
    }
  },
  configureWebpack: config => {
    // 环境判断
    if (process.env.NODE_ENV === "production") {
      // 为生产环境修改配置...
      config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true
    } else {
      // 为开发环境修改配置...
    }

    config.resolve = Object.assign(config.resolve, {
      alias: {
        "@": resolve("src"),
        "@api": resolve("src/api"),
        "@components": resolve("src/components"),
        "@assets": resolve("src/assets"),
        "@store": resolve("src/store"),
        "@utils": resolve("src/utils")
      }
    })
  },
  chainWebpack: config => {
    config.plugin("compression-webpack-plugin").use(CompressionPlugin, [{
      test: /\.(js|css|html|svg|gif|png|jpeg|txt)$/, // 匹配文件名
      threshold: 10240, // 对超过10k的数据压缩
      deleteOriginalAssets: false // 是否删除未压缩的源文件，谨慎设置，如果希望提供非gzip的资源，可不设置或者设置为false（比如删除打包后的gz后还可以加载到原始资源文件）
    }])

    config.module
      .rule("svg")
      .exclude.add(resolve("src/icons/svg"))
      .end()
    config.module
      .rule("icons")
      .test(/\.svg$/)
      .include.add(resolve("src/icons"))
      .end()
      .use("svg-sprite-loader")
      .loader("svg-sprite-loader")
      .options({
        symbolId: "icon-[name]"
      })
      .end()
      .before("svg-sprite-loader")
      .use("svgo-loader")
      .loader("svgo-loader")
      .options({
        plugin: [
          {
            name: "removeAttrs",
            params: {
              attrs: "fill"
            }
          }
        ]
      })
      .end()
  }
}

